<template>
	<div class="theme">
		<van-nav-bar title="第二个页面" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="overlay nav-btm headTop">
			<div class="overlay-content scrolling">
				<!--
                	作者：ceet@vip.qq.com
                	时间：2019-09-16
                	描述：二维码示例
                -->
				<div align="center" style="padding-top: 100px;">
					<div style="width: 260px;height: 240px;background-color: #344b7d;padding: 20px 0px 0px 0px;">
						<div style="width: 220px;height: 220px;background-color: #FFFFFF;">
							<qriously v-if="val" :value="val" level="H" :size="200" style="padding: 10px 0px;"/>
						</div>
					</div>
				</div>
				<div class="btn">
					<van-button type="primary" @click.native="copy" class="copybtn" :data-clipboard-text="val">复制二维码内容</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Test',
		components: {},
		props: {},
		data() {
			return {
				val: ''
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onClickLeft() {
				this.$router.push({
					path: '/'
				});
			},
			getList() {
				this.axios.get(process.env.API_HOST + 'notices/newest').then(res => {
					if(res.data.code == 200) {
						this.val = res.data.data[0].title;
					}
				})
			},
			copy() {
				let clipboard = new ClipboardJS('.copybtn')
				clipboard.on('success', e => { 
					_this.$toast("复制成功");
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					_this.$toast("复制失败");
					clipboard.destroy();
				})
			}
		},
		created() {},
		mounted() {
			this.getList();
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.btn {
		width: 100%;
		padding-top: 20px;
		text-align: center;
	}
</style>